<template>
  <div>
    <div class="container" :style="{
      minHeight: '100vh',
      alignItems: 'center',
      display: 'flex',
      width: '100%',
      backgroundSize: '100% 100%',
      backgroundPosition: 'center center',
      backgroundRepeat: 'no-repeat',
      justifyContent: 'center',
    }">
      <el-form ref="ruleForm" class="rgs-form" :model="ruleForm" :rules="rules" label-width="auto">
        <div :style="{
          padding: '0px',
          margin: '0 0 10px',
          borderColor: '#eee',
          color: '#2b9afc',
          textAlign: 'center',
          display: 'inline-block',
          background: 'none',
          borderWidth: '0px',
          width: '100%',
          lineHeight: '40px',
          fontSize: '20px',
          borderStyle: 'solid',
          fontWeight: '500',
        }" class="title">
          注册账号
        </div>
        <el-form-item label="用户名：" prop="userName">
          <el-input style="width: 300px;" v-model="ruleForm.userName" autocomplete="off" placeholder="用户名"
            type="text" />
        </el-form-item>
        <el-form-item label="密码：" prop="password">
          <el-input style="width: 300px;" v-model="ruleForm.password" autocomplete="off" placeholder="密码"
            type="password" />
        </el-form-item>
        <template v-if="radio == 2">
        <el-form-item label="店铺名称：" prop="name">
          <el-input style="width: 300px;" v-model="ruleForm.name" autocomplete="off" placeholder="店铺名称"
            />
        </el-form-item>
        <el-form-item label="联系方式：" prop="phone">
          <el-input style="width: 300px;" v-model="ruleForm.phone" autocomplete="off" placeholder="联系方式"
            />
        </el-form-item>
      </template>
        <el-form-item label="账号类型">
          <el-radio-group v-model="radio">
            <el-radio :label="1">管理员</el-radio>
            <el-radio :label="2">商家</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item></el-form-item>
        <el-button :style="{
          border: '0px solid #4FA1D9',
          cursor: 'pointer',
          padding: '0 24px',
          boxShadow: '0 0 0px rgba(64, 158, 255, .5)',
          margin: '20px 20px 0 0',
          color: '#fff',
          display: 'inline-block',
          letterSpacing: '4px',
          outline: 'none',
          borderRadius: '4px',
          background: '#2b9afc',
          width: 'auto',
          fontSize: '16px',
          height: '40px',
        }" type="button" class="r-btn" @click="register('ruleForm')">
          立即注册
        </el-button>
        <div :style="{
          cursor: 'pointer',
          padding: '0',
          margin: '20px 0 0',
          color: 'rgba(159, 159, 159, 1)',
          textAlign: 'right',
          display: 'inline-block',
          width: 'auto',
          lineHeight: '44px',
          fontSize: '14px',
        }" class="r-login" @click="close()">
          前往登录
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      radio: 1,
      ruleForm: {},
      forgetForm: {},
      checkPassword: "",
      rules: {
        userName: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ],
        name: [
          { required: true, message: '请输入商铺名称', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入手机号', trigger: 'blur' }
        ],
      }
    };
  },
  methods: {
    // 获取uuid
    getUUID() {
      return new Date().getTime();
    },
    close() {
      this.$router.push({ path: "/login" });
    },

    // 多级联动参数

    // 注册
    register(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let APIURL = '/users/register'
          if(this.radio == 1) {
            APIURL = '/users/register'
          } else {
            APIURL = '/merchant/register'
          }
          this.$http({
            url: APIURL,
            method: "post",
            data: this.ruleForm,
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message({
                message: "注册成功",
                type: "success",
                duration: 1500,
                onClose: () => {
                  this.$router.replace({ path: "/login" });
                },
              });
            } else {
              this.$message.error(data.msg);
            }
          });
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  position: relative;
  background: url(http://codegen.caihongy.cn/20231118/03ccfac983fd4dac8fa98ccb357ee0dc.jpg);

  .el-date-editor.el-input {
    width: 100%;
  }

  .rgs-form {
    background-color: #fff;
    width: 500px;
    padding: 40px;
  }
}

.required {
  position: relative;
}

.required::after {
  color: red;
  position: absolute;
  right: 3px;
  content: "*";
  order: 3;
}

.editor>.avatar-uploader {
  line-height: 0;
  height: 0;
}
</style>
